<template>
  <div class="wrap">
    <split-pane :min-percent="20" :default-percent="70" split="vertical">
      <template slot="paneL">
        <!-- 编辑自己的代码 -->
        <split-pane :min-percent="20" :default-percent="70" split="horizontal">
          <template slot="paneL">
            <!-- 编辑自己的代码 -->
            <div class="paneL">画布位置</div>
          </template>
          <template slot="paneR">
            <!-- 编辑自己的代码 -->
            <div class="paneB">下面位置</div>
          </template>
        </split-pane>
      </template>
      <template slot="paneR">
        <!-- 编辑自己的代码 -->
        <div class="paneR">右边位置</div>
      </template>
    </split-pane>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="less"  scoped>
.wrap {
  height: 100vh;
}
.paneL {
  //   background-color: red;
  height: 100%;
  width: 100%;
}
.paneR {
  background-color: pink;
  height: 100%;
  width: 100%;
}
.paneB {
  background-color: green;

  height: 100%;
  width: 100%;
}
</style>